<template>
    <div>
        <div class="Grid Grid--justifyCenter ranking_bj" v-if="dataList.length">
            <img src="../../static/images/ranking.png" height="182px" alt="">
            <div style="text-align: center;position: absolute;bottom: 38px;width: 116px;">
                <div style="font-size: 13px;color: #FF2525;font-weight: 600;">&yen;{{dataList[0].pay_real}}</div>
                <div style="margin-top: 10px;">
                    <img style="width: 33px;height: 33px;border-radius: 100%;border: 1px solid rgb(128, 204, 90);" :src="dataList[0].headimgurl" alt="">
                </div>
                <div style="width:46px;overflow: hidden;margin: 18px auto 0;height: 17px;background: linear-gradient( 90deg, #FFE37D 0%, #FFB91E 100%);border-radius: 15px;font-weight: 600;font-size: 12px;color: #9F5D0C;">{{dataList[0].nickname}}</div>
                <div style="margin-top: 22px;font-family: Impact;font-size: 33px;color: #C01F1F;line-height: 40px;">{{dataList[0].rank}}</div>
            </div>
            <div v-if="dataList.length>=2" style="text-align: center;position: absolute;left: -2px;bottom: 20px;width: 100px;">
                <div style="font-size: 13px;color: #FF833C;font-weight: 600;">&yen;{{dataList[1].pay_real}}</div>
                <div style="margin-top: 8px;">
                    <img style="width: 33px;height: 33px;border-radius: 100%;border: 1px solid rgb(128, 204, 90);" :src="dataList[1].headimgurl" alt="">
                </div>
                <div style="width:46px;overflow: hidden;margin: 16px auto 0;height: 17px;background: linear-gradient( 90deg, #FFE37D 0%, #FFB91E 100%);border-radius: 15px;font-weight: 600;font-size: 12px;color: #9F5D0C;">{{dataList[1].nickname}}擦擦手</div>
                <div style="margin-top: 16px;font-family: Impact;font-size: 33px;color: #B1521B;line-height: 40px;">{{dataList[1].rank}}</div>
            </div>
            <div v-if="dataList.length>=3" style="text-align: center;position: absolute;right: -2px;bottom: 0;width: 100px;">
                <div style="font-size: 13px;color: #D78117;font-weight: 600;">&yen;{{dataList[2].pay_real}}</div>
                <div style="margin-top: 8px;">
                    <img style="width: 33px;height: 33px;border-radius: 100%;border: 1px solid rgb(128, 204, 90);" :src="dataList[2].headimgurl" alt="">
                </div>
                <div style="width:46px;overflow: hidden;margin: 18px auto 0;height: 17px;background: linear-gradient( 90deg, #FFE37D 0%, #FFB91E 100%);border-radius: 15px;font-weight: 600;font-size: 12px;color: #9F5D0C;">{{dataList[2].nickname}}</div>
                <div style="margin-top: 13px;font-family: Impact;font-size: 33px;color: #9F5D0C;line-height: 40px;">{{dataList[2].rank}}</div>
            </div>
            <div class="sales_ranking">
                本月销售额排名
                <!-- <img src="../../static/images/ranking_bj.png" height="32px" alt=""> -->
            </div>
        </div>
        <div class="content" :class="$route.query.key=='pc'?'pcContent':''">
            <div class="Grid Grid--justifySpaceBetween" v-for="(item,index) in dataList" :key="index" v-if="item.rank>3">
                <div style="width: 20%;text-align: center;">{{item.rank}}</div>
                <div style="width: 40%;text-align: center;">{{item.nickname}}</div>
                <div style="width: 40%;text-align: center;">&yen;{{item.pay_real}}</div>
            </div>
        </div>
    </div>
</template>
<script>
import {mapState} from "vuex";
export default {
    props: {
        rankingList: {
            type: Array,
            default: function () {
                return [];  // 使用工厂函数返回新的数组
            }
        },
    },
    data () {
        return {
            dataList: []
        }
    },
    computed: {
        ...mapState({
            userInfo: state => state.login.userInfo
        }),
    },
    mounted () {
        if (this.$route.query.key == 'pc') {
            this.dataList = JSON.parse(this.$route.query.data)
            console.log(this.$route.query.data, 'this.$route.query.data')
        } else {
            this.dataList = this.rankingList
        }
    },
    methods: {
    }
}
</script>
<style lang="scss" scoped>
.content{
    background: #fff;
    height: calc(100vh - 322px);
    border-radius: 20px 20px 0px 0px;
    overflow-y: scroll;
    padding-bottom: 40px;
    &>div{
        padding-top: 20px;
        font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
        font-weight: 400;
        font-size: 14px;
        color: #222222;
        line-height: 19px;
    }
}
.ranking_bj{
    position: relative;
    padding-top: 100px;
    width: 275px;
    height: 180px;
    margin: auto;
    .sales_ranking{
        position: absolute;
        bottom: 0;
        background: url('../../static/images/ranking_bj.png') no-repeat;
        background-size: 163px 32px;
        width: 163px;
        height: 32px;
        font-size: 12px;
        text-align: center;
        line-height: 30px;
        color: #fff;
    }
}
.pcContent{
    height: calc(100vh - 280px);
    padding-bottom: 0;
}
</style>